<template>
  <div class="content_box">
<!--    {{calendarOptions?.events}}-->
    <FullCalendar v-model:options="calendarOptions" />
    <TaskEditDrawer v-model="formData"></TaskEditDrawer>
  </div>
</template>

<script lang="ts" setup>
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import FullCalendar from "@fullcalendar/vue3";
import {onBeforeMount, onMounted, reactive, ref} from "vue";
import {TaskData, TaskMoreData} from "@/views/model/model";
import {post, Response} from "@/api/http";
import {deleteTask, getSuccessTaskInfo, getTaskPanelInfo} from "@/api/url";
import {convertEvent, obj2Map} from "@/utils";
import TaskEditDrawer from "@/views/task/TaskEditDrawer.vue";
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import {useMessage} from "naive-ui";
import useUserStore from "@/store/modules/user";
const useSurfaceSetting = UseSurfaceSettingStore()
const surfaceSetting = useSurfaceSetting.getSurfaceSetting();
const message = useMessage()
const userStore = useUserStore()
const formData = reactive({
  show:false,
  taskPanel:true,
  key:Date.now(),
  edit:false,
  data:TaskData.getNewTaskData(parseInt(surfaceSetting.showTaskPanelState),1,null)
})
const props = defineProps(["timeZone"]);
let plusYear = 0;
const plusInfo = ()=>{
  plusYear = plusYear+3
  getInfo()
}
const substractInfo = ()=>{
  plusYear = plusYear-3
  getInfo()
}
const getInfo = async ()=>{
  try {
    // table.tableLoading.value = true;
    const data: Response = await post({
      url: getSuccessTaskInfo,
      data: {id:plusYear},
      token:userStore.getToken()
    });
    // console.log(data)
    calendarOptions.events = convertEvent(data.data.data, userStore.timezone)
  }catch(e) {
    message.error((e as Error).message)
  }finally {
    // table.tableLoading.value = false;
  }
}
onBeforeMount(getInfo)
const handleEventClick = (calEvent:any)=>{
  console.log(calEvent)
  calEvent.jsEvent.preventDefault(); // don't let the browser navigate
  formData.data = {...calEvent.event.extendedProps, id:calEvent.event.extendedProps.tid}
  console.log(formData.data)
  formData.show = true
  // if (calEvent.event.url) {
  //   window.open(calEvent.event.url);
  // }
}
const calendarOptions:any = reactive({
  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
  height: 550,
  initialView: "dayGridMonth",
  eventTextColor: "white",
  customButtons: {
    myLastYear: {
      text: "上三月记录",
      click: substractInfo
    },
    myNextYear: {
      text: "下三月记录",
      click: plusInfo
    },
  },
  headerToolbar: {
    left: "dayGridMonth,timeGridWeek,myLastYear,myNextYear",
    center: "title",
    right: "prevYear,prev,next,nextYear today",
  },
  handleWindowResize: true,//是否随窗口大小变化
  eventClick: handleEventClick,
  eventOrderStrict: true,
  eventColor: "gray",
  timeZone: userStore.timezone,
  // 设置日程
  events: [
    { title: "event 1", start: "2023-08-25 14:22:00", color: "red", description: "description for Long Event" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 1", date: "2023-08-25 14:00:00" },
    { title: "event 2", date: "2023-08-24 14:00:00" },
  ],
  editable: false,
  dayMaxEventRows: 5,
  locale: "zh", // 设置语言
});
</script>

<style lang="scss" scoped></style>
